<template>
	<div id="button" ref="button">
		<div class="view-content"> 
			<!-- @touchmove="touchmove($event)" @touchstart="touchstart($event)" @touchend="touchend($event)" -->
			<div class="demo-box" style="text-align: left;margin-bottom: 20px;">
				<div class="deme-box-header" style="padding-bottom: 10px;">
					<span style="display: block;text-align: left;padding-bottom: 10px; font-size: 18px;border-bottom: 1px solid #ccc;">普通按钮</span>
				</div>
				<sgs-button @click="buttonClickedBack()" type="default"></sgs-button>
				<sgs-button @click="buttonClicked()" type="primary"></sgs-button>
				<sgs-button @click="buttonClicked()" type="info"></sgs-button>
				<sgs-button @click="buttonClicked()" type="success"></sgs-button>
				<sgs-button @click="buttonClicked()" type="warning"></sgs-button>
				<sgs-button @click="buttonClicked()" type="danger"></sgs-button>
				<sgs-button @click="buttonClicked()" type="danger" disabled></sgs-button>
			</div>


			<div class="demo-box" style="text-align: left;margin-bottom: 20px;">
				<div class="deme-box-header" style="padding-bottom: 10px;">
					<span style="display: block;text-align: left;padding-bottom: 10px; font-size: 18px;border-bottom: 1px solid #ccc;">Plain按钮</span>
				</div>
				<sgs-button @click="buttonClicked()" plain type="default"></sgs-button>
				<sgs-button @click="buttonClicked()" plain type="primary"></sgs-button>
				<sgs-button @click="buttonClicked()" plain type="info"></sgs-button>
				<sgs-button @click="buttonClicked()" plain type="success"></sgs-button>
				<sgs-button @click="buttonClicked()" plain type="warning"></sgs-button>
				<sgs-button @click="buttonClicked()" plain type="danger"></sgs-button>
				<sgs-button @click="buttonClicked()" plain type="danger" disabled></sgs-button>
			</div>
			
			<div class="demo-box" style="text-align: left;margin-bottom: 20px;">
				<div class="deme-box-header" style="padding-bottom: 10px;">
					<span style="display: block;text-align: left;padding-bottom: 10px; font-size: 18px;border-bottom: 1px solid #ccc;">带图标按钮</span>
				</div>
				<sgs-button @click="buttonClicked()" icon="icon-arrow-with-circle-down" iconPosition="left" type="default"  ></sgs-button>
				<sgs-button @click="buttonClicked()" icon="icon-arrow-with-circle-down" iconPosition="left" type="primary"  ></sgs-button>
				<sgs-button @click="buttonClicked()" icon="icon-arrow-with-circle-down" iconPosition="left" type="info"  ></sgs-button>
				<sgs-button @click="buttonClicked()" icon="icon-arrow-with-circle-down" iconPosition="left" type="success"  ></sgs-button>
				<sgs-button @click="buttonClicked()" icon="icon-arrow-with-circle-down" iconPosition="left" type="warning"  ></sgs-button>
				<sgs-button @click="buttonClicked()" icon="icon-arrow-with-circle-down" iconPosition="left" type="danger"  ></sgs-button>
				<sgs-button @click="buttonClicked()" icon="icon-arrow-with-circle-down" iconPosition="left" type="danger"  disabled ></sgs-button>
			</div>

			<div class="demo-box" style="text-align: left;">
				<div class="deme-box-header" style="padding-bottom: 10px;">
					<span style="display: block;text-align: left;padding-bottom: 10px; font-size: 18px;border-bottom: 1px solid #ccc;">自定义图标方向按钮</span>
				</div>
				<sgs-button @click="buttonClicked()" icon="icon-arrow-with-circle-down" iconPosition="left" type="default"  ></sgs-button>
				<sgs-button @click="buttonClicked()" icon="icon-arrow-with-circle-down" iconPosition="top" type="primary"  ></sgs-button>
				<sgs-button @click="buttonClicked()" icon="icon-arrow-with-circle-down" iconPosition="right" type="info"  ></sgs-button>
				<sgs-button @click="buttonClicked()" icon="icon-arrow-with-circle-down" iconPosition="bottom" type="success"  ></sgs-button>
			</div>
		</div>
	</div>
</template>

<script>

	var startX = 0; 
	var beginPan = false;
	var endX = 0;

import SgsButton from '../packages/buttons/button'
	export default {
		components: {
			SgsButton
		},
		methods: {
			buttonClickedBack: function() {
				this.$router.go(-1);
			},
			buttonClicked: function() {
				console.log('ccc');
				// this.$router.go(-1);
			},
			/*
			touchstart: function(event) {
				// console.log('开始点:' + event.targetTouches[0].clientX);
				startX = event.targetTouches[0].clientX;
				if (startX <= 50) {
					console.log('滑动开始');
					beginPan = true;
				}},
			touchmove: function(event) {
				// console.log('经过点:' + event.targetTouches[0].clientX);
				var moveX = event.targetTouches[0].clientX;
				var intervalX = 0;
				if (beginPan) {
					intervalX = moveX - startX;
					console.log('移动了' + intervalX);
					console.log(screen.width);
					endX = intervalX;
					// console.log(this.$refs.button.style.left = );
					this.$refs.button.style.left = intervalX + 'px';
				}},
			touchend: function() {
				beginPan = false;
				// let divLeft = this.$refs.button.style.left;
				let screenWidth = screen.width;	
				var x = .5*screenWidth;
				// console.log(divLeft);
				if (endX > x) {
					this.$refs.button.style.left = screenWidth + 'px';
					this.$router.go(-1);
				} else {
					this.$refs.button.style.left = 0 + 'px';
				}}

				*/
		}
	}
</script>

<style scoped>
	#button { position: absolute; width: 100%; height: 100%; overflow: scroll; };
	.demo-box {
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 10px;
		box-shadow: 0 0 3px #ccc;
	}
</style>